<template>
	<view class="top-box">
		<view class="navigation"></view>
		<view class="header">
			<view class="plus-box">
				<image src="../../static/plus.png" mode=""></image>
			</view>
			<view class="input-box">
				<div class="search-icon">
					<image src="../../static/search.png" mode=""></image>
				</div>
				<input type="text" />
			</view>
			<view class="icon-box">
				<view class="menu-box">
					<image src="../../static/menu.png" mode=""></image>
				</view>
				<view class="inform-box">
					<image src="../../static/inform.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="title-list">
			<ul>
				<li v-for="(item, index) in titles" :key="index" :class="index === active ? 'active' : ''"
					@click="bigFont(index)">{{ item }}
				</li>
			</ul>
		</view>
	</view>

	<view class="middle-box">
		<view class="content-box">
			<component :is="currentComponent"></component> 
		</view>
	</view>

</template>

<script setup>
	import { ref, computed } from 'vue';  
	
	import Recommend from '@/pages/recommend/recommend.vue';  
	import Attention from '@/pages/attention/attention.vue';  
	import Video from '@/pages/video/video.vue';
	import Activity from '@/pages/activity/activity.vue'

	var active = ref(1);
	const titles = ref(['关注', '推荐', '笔记', '视频', '地域美食', '活动']); 

	const bigFont = (index) => {
		active.value = index;
	}
	
	const currentComponent = computed(() => {  
	    switch (active.value) {  
	        case 0: return Attention;  
	        case 1: return Recommend; 
	        case 3: return Video;
			case 5: return Activity;
	        // default: return Recommend; 
	    }  
	});  
</script>

<style lang="scss">
	.top-box {
		width: 100%;
		height: 132px;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;

		.navigation {
			width: 100%;
			height: 24px;
			// background-color: palegreen;
		}

		.header {
			width: 100%;
			height: 54px;
			// background-color: palegoldenrod;
			padding-top: 2px;
			overflow: hidden;

			.plus-box {
				width: 27px;
				height: 27px;
				margin-left: 16px;
				margin-top: 13px;
				background-color: #ffb531;
				border-radius: 50%;
				float: left;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.input-box {
				width: 294px;
				height: 38px;
				float: left;
				margin-left: 14px;
				margin-top: 8px;
				position: relative;

				.search-icon {
					width: 18px;
					height: 18px;
					position: absolute;
					left: 7px;
					top: 10px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				input {
					width: 100%;
					height: 100%;
					background-color: #f5f5f5;
					border-radius: 6px;
				}
			}

			.icon-box {
				width: 70px;
				height: 26px;
				// background-color: palegreen;
				float: left;
				margin-left: 20px;
				margin-top: 14px;
				display: flex;

				.menu-box {
					width: 56%;
					height: 100%;
					// background-color: paleturquoise;

					image {
						width: 56%;
						height: 100%;
					}
				}

				.inform-box {
					width: 44%;
					height: 100%;
					// background-color: palevioletred;

					image {
						width: 74%;
						height: 100%;
					}
				}
			}
		}

		.title-list {
			width: 100%;
			height: 32px;
			margin-top: 12px;
			// background-color: palegoldenrod;

			ul {
				width: 100%;
				height: 100%;
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				// background-color: paleturquoise;

				li {
					// width: 60px;
					height: 100%;
					margin-left: 17px;
					margin-right: 1px;
					line-height: 40px;
					// letter-spacing: 0.5px;
					// background-color: palegreen;
					// border: 1px solid black;
					color: #6c6c6c;
					font-size: 14px;
				}

				.active {
					font-size: 22px;
					font-weight: bold;
					line-height: 30px;
					color: #2a2a2a;
					border-bottom: 4px solid #ffc533;
				}
			}
		}
	}
	
	.middle-box{
		width: 100%;
		height: auto;;
		overflow: hidden;
		// background-color: palegoldenrod;
		
		.content-box{
			width: 100%;
			height: auto;
			margin-top: 131px;
			// background-color: paleturquoise;
		}
	}
</style>